<template>
  <div class="callbcak-main">
      <div class="container"  v-if="isBind">
            <div class="unbind">
                <div class="loading"></div></div>
        </div>
      <div class="container" v-else>
          <div class="top">
              <span @click="handzhanghao = true" :class="{active:handzhanghao}"><i class="iconfont icon-bind"></i> 已有小兔鲜账号,请绑定手机</span>
              <span @click="handzhanghao = false" :class="{active:!handzhanghao}"><i class="iconfont icon-edit"></i> 没有小兔鲜账号,请完善资料</span>
          </div>
          <CallbackBind :unionId="unionId" v-if="handzhanghao === true" />
          <CallbackPitch :unionId="unionId" v-if="handzhanghao === false"/>
      </div>

  </div>
</template>

<script>
import CallbackBind from './callback-bind.vue'
import CallbackPitch from './callback-patch.vue'
import { ref } from 'vue'
import { userQQlogin } from '@/api/user'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import Message from '@/components/libaray/Message'
import QC from 'qc'
export default {
  name: 'CallbackMain',
  components: {
    CallbackBind,
    CallbackPitch
  },
  setup () {
    const handzhanghao = ref(true)
    // 首先:默认认为为已经注册且已经绑定
    // 通过QQ的APi获取openID就是后台需要的unionID然后去进行登录
    // 如果成功:登录成功
    // 如果失败:该QQ没有个小兔鲜进行绑定(有账号未绑定qq,灭有账号未绑定QQ)
    // 确保qq已经登陆
    const isBind = ref(true)
    const store = useStore()
    const router = useRouter()
    const unionId = ref(null)
    // const route = useRoute()

    if (QC.Login.check()) {
      QC.Login.getMe((openId) => {
        unionId.value = openId
        // 第三方唯一标识qq
        // 请求小兔先后台,做QQ登录
        userQQlogin(openId).then(data => {
          // 登录成功  data.result用户信息
        //   存储用户信息
          const { id, account, avatar, mobile, nickname, token } = data.result
          store.commit('user/setUser', { id, account, avatar, mobile, nickname, token })

          store.dispatch('cart/mergeCart').then(() => {
          // 进行跳转
            router.push(store.state.user.redirectUrl)
            // 成功提示消息
            Message({ type: 'success', message: '登录成功' })
          })
        }).catch(err => {
          // 登录失败,灭有和小兔鲜绑定过
          isBind.value = false
          console.log(err)
        })
      })
    }
    return { handzhanghao, isBind, unionId }
  }
}
</script>

<style scoped lang="less">
.container {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 40px;
    padding-bottom: 120px;
    align-items: center;
    background-color: #fff;
    margin-top: 30px;
    margin-bottom: 30px;
    min-height: 600px;
    .unbind {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 25px 0;
    z-index: 99;
    .loading {
      height: 100%;
      background: #fff url(../../../assets/images/load.gif) no-repeat;
      background-position: center center;
      background-size: 100px;
    }
  }
    .top {
        span {
            display: inline-block;
            padding: 0 40px 10px;
            color: #999;
            font-size: 20px;
            border-bottom: 2px solid #ccc;
            cursor: pointer;
            i {
                font-size: 22px;
                vertical-align: middle;
            }
            &.active {
                color: @xtxColor;
                border-color: @xtxColor;
            }
        }
    }
}
</style>
